<template>
<div class="px-10 overflow-y-auto" style="height: 575px;">
  <div class="new-list">
    <div style="width:50px">标题:</div> 
      <a-input v-model="form.title" placeholder="标题" />
    </div>
    <div class="quill-wrap">
      <quill-editor ref="myQuillEditor" v-model="form.contentHtml" :options="editorOption"  />
    </div>
  </div>
</template>
<script>
import 'quill/dist/quill.snow.css'
import { quillEditor } from 'vue-quill-editor'
export default {
    props: {
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: { quillEditor },
  data() {
    const toolbarOptions = [
      ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
      ["blockquote", "code-block"], // 引用  代码块
      [{ header: 1 }, { header: 2 }], // 1、2 级标题
      [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
      [{ script: "sub" }, { script: "super" }], // 上标/下标
      [{ indent: "-1" }, { indent: "+1" }], // 缩进
      // [{'direction': 'rtl'}],                         // 文本方向
      [{ size: ["small", false, "large", "huge"] }], // 字体大小
      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
      [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
      [{ font: [] }], // 字体种类
      [{ align: [] }], // 对齐方式
      ["clean"], // 清除文本格式
      ["link", "image"] // 链接、图片、视频
    ];
    return {
      editorOption: {
        placeholder: "",
        theme: "snow", // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions,
            // container: "#toolbar",
            // handlers: {
            //   image: function(value) {
            //     if (value) {
            //       // 触发input框选择图片文件
            //       document.querySelector(".avatar-uploader input").click();
            //     } else {
            //       this.quill.format("image", false);
            //     }
            //   },
            //   // link: function(value) {
            //   //   if (value) {
            //   //     var href = prompt('请输入url');
            //   //     this.quill.format("link", href);
            //   //   } else {
            //   //     this.quill.format("link", false);
            //   //   }
            //   // },
            // }
          }
        }
      },
    }
  },
  methods:{
    save() {
      if (!this.form.title || !this.form.contentHtml) {
        this.$message.warning("请输入标题和内容")
        this.$emit('reject', null);
        return false
      }
      this.$ajax({
        url: this.$api.news.saveOrUpdate,
        data:this.form ,
        success: (result) => {
          this.$message.success("操作成功");
          this.$emit("pass", null);
          // this.$router.push(`/member/list`);
        },
        fail: (err) => {
          this.$message.success(err);
        //   this.$emit("reject", null);
        },
      });
    },
  }
}
</script>
<style>
.ql-container {
  min-height: 300px;
}
.quill-editor {
  width: 100%;
}
.new-list{
    display:flex;
    padding:10px;
    align-items: center;
}
</style>
<style>
p {
  margin: 10px;
}

.edit_container,
.quill-editor {
  height: 300px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>
